<template>
	<view>
		<uni-forms ref="form" :value="formData">
			<uni-forms-item name="phone">
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
				<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入用户名(手机号)" maxlength="11" />
			</uni-forms-item>
			<uni-forms-item name="code">
				<uni-easyinput type="text" v-model="formData.code" placeholder="请输入验证码" maxlength="4" />
			</uni-forms-item>
			<uni-forms-item name="password">
				<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码(8-15位)" maxlength="15" />
			</uni-forms-item>
			<uni-forms-item name="password2">
				<uni-easyinput type="password" v-model="formData.password2" placeholder="请确认密码" maxlength="15" />
			</uni-forms-item>
			<uni-forms-item name="nickName">
				<uni-easyinput type="text" v-model="formData.nickName" placeholder="请输入用户昵称" />
			</uni-forms-item>
		</uni-forms>
		<view class="btns">
			<button @click="submitForm">立即注册</button>
			<button @click="login" type="info">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				getCodeText: '获取验证码',
				getCodeBtnColor: "#d81e06",
				getCodeisWaiting: false,
				formData: {
					phone: '',
					code: '',
					password: '',
					password2: '',
					nickName: ''
				},
				//  验证表单的规则
				formRules: {
					phone: {
						rules: [{
								required: true,
								errorMessage: '手机号不能为空',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									let phoneReg = (
										/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/
									); //手机号码
									if (!phoneReg.test(value)) {
										callback('请输入正确的手机号')
									}
									return true
								}
							}
						],
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '验证码不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value.length > 15 || value.length < 8) {
									callback('密码长度在8-15位')
								} else {
									return true
								}
							}
						}]
					},
					password2: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value != data.password) {
									callback('两次密码不一致')
								}
								return true
							}
						}]
					},
					nickName: {
						rules: [{
							required: true,
							errorMessage: '用户昵称不能为空'
						}]
					}
				}
			}
		},
		onReady() {
			this.$refs.form.setRules(this.formRules);
		},
		methods: {
			Timer() {},
			getCode() {
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.formData.phone))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.getCodeText = "发送中..." //发送验证码
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "#999999" //追加样式，修改颜色
				//示例用定时器模拟请求效果
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				setTimeout(() => {
					uni.showToast({
						title: '验证码已发送',
						icon: "none"
					}); //弹出提示框
					this.$myRequest({
						url: '/msm/send/' + this.formData.phone
					})
					//示例默认1234，生产中请删除这一句。
					// this.code = '1234'; //发送验证码，进行填入
					this.setTimer(); //调用定时器方法
				}, 1000)
			},
			//setTimer： 需要每隔一段时间执行一件事的的时候就需要使用SetTimer函数
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#d81e06";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			login() { //登录
				uni.navigateTo({
					url: '/pages/Mine/Login',
				});
			},
			submitForm() { //提交注册表单
				var that = this;
				this.$refs.form.validate().then(async (data) => {
					console.log('表单数据信息：', data);
					const res = await that.$myRequest({
						url: '/loginBefore/register',
						// url:'/register',
						method: 'POST',
						data: {
							phone: that.formData.phone,
							password: that.formData.password,
							nickname: that.formData.nickName,
							code: that.formData.code
						},
					})
					console.log(res);
					if (res.data.code == 20000) { //成功
						uni.showToast({
							title: '注册成功！',
							icon: 'success',
							success() {
								setTimeout(function() {
									uni.navigateBack()
								}, 1000);
							}
						})
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
						})
					}
				})


			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	/deep/.uni-forms-item:first-child {
		margin-top: 50rpx;
	}

	/deep/.uni-easyinput {
		width: 90%;
		margin: 10rpx auto;
	}

	/deep/.uni-forms-item__error {
		margin-left: 40rpx;
	}

	/deep/.uni-forms-item:first-child .uniui-clear:before {
		margin-right: 210rpx;
	}

	button {
		width: 80%;
		margin: 20rpx auto;

		&:first-child {
			background-color: #d81e06;
			color: #fff;
		}
	}

	.login {
		display: flex;
		justify-content: center;
		color: #d81e06;
	}

	.get-code {
		position: absolute;
		height: 90rpx;
		display: flex;
		align-items: center;
		right: 0;
		margin: 0 75rpx;
		z-index: 3;

		&:before {
			//左边出现一条线
			content: "";
			width: 1px;
			height: 50rpx;
			background-color: #d81e06;
			position: absolute;
			z-index: 3;
			right: 180rpx;
		}
	}
</style>
